<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2023-12-01 08:49:25
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-04-21 21:06:21
-->
<template>
    <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="案例" name="first">
            <el-scrollbar>
                <ExamplePanel title="案例1-基础表格案例：" desc="表格基础用法:仅需要配置columns（列表表头显示数据），data（表格数据），loading（加载状态）"
                    :file="'table2.text'">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Table1></Table1>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 表格单元格自定义formatter  -->
                <ExamplePanel title="案例2-表格单元格自定义formatter："
                    desc="基础用法:formatter是一个函数，定义自己的格式化函数，该函数接受当前行row为数据，函数内部可以通过row数据自定义自己的实现逻辑。" :file="'table3.text'">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Table3></Table3>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 表格单元格自定义Component  -->
                <ExamplePanel title="案例3-表格单元格自定义Component："
                    desc="基础用法:component是一个函数（(row)=> h('自定义的组件', {'row-data': row})），表格的行数据通过组件props参数透传给component，component内部可以通过获取列表数据实现自己的UI组件。"
                    :file="'table4.text'">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Table4></Table4>
                        </div>
                    </template>
                </ExamplePanel>

                <!-- 多级表头 -->
                <ExamplePanel title="案例4-多级表头：" desc="基础用法:只需要在columns定义的时候添加children属性，children里面存放下级表头信息"
                    :file="'table5.text'">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Table5></Table5>
                        </div>
                    </template>
                </ExamplePanel>

                <!-- 自带操作列表的表格 -->

                <ExamplePanel title="案例5-自带操作列表的表格：" desc="
                    基础用法:只需要配置表格的operation-columns(Array<OperationColumnType>)属性，以及列表的方法@handle-operation（用于接受相关操作的回调数据）；
                        OperationColumnType数据类型包含4个主要属性：label（操作列表名称）, 
                        fixed（列表是否固定）,width（列表宽度），btns操作相配置；具体详细配置可以在文档中查看。" :file="'table6.text'">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Table6></Table6>
                        </div>
                    </template>
                </ExamplePanel>

                <!-- 自定义操作列表的表格 -->

                <ExamplePanel title="案例6-自定义操作列表的表格：" desc="
                    基础用法:通过使用table组件的operations插槽实现" :file="'table7.text'">
                    <template v-slot:example>
                        <div style="height: 300px;">
                            <Table7></Table7>
                        </div>
                    </template>
                </ExamplePanel>

                <!-- 表格启动分页（接口分页非前端分页） -->
                <ExamplePanel title="案例7-表格启动分页（接口分页非前端分页）：" desc="
                    基础用法:通过配置表格属性page({currentPage: '当前页码', total: '总条数', pageSize: '每页大小'})，@size-change（当前页面大小限制数发生变化触发的回调）,@current-change(页码发生变化触发的回调)" :file="'table8.text'">
                    <template v-slot:example>
                        <div style="height: 400px;">
                            <Table8></Table8>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 表格启动表头排序 -->
                <ExamplePanel title="案例8-表格排序（接口排序）：" desc="
                    基础用法: columns中的列表配置项sort设置为true,表格事件@sort-change（组件排序会触发的回调）" :file="'table9.text'">
                    <template v-slot:example>
                        <div style="height: 400px;">
                            <Table9></Table9>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 表格启动表头筛序 -->
                <ExamplePanel title="案例9-表格启动表头筛序：" desc="
                    基础用法: columns中的列表配置项search设置,表格事件@fliter-change（组件条件筛选会触发的回调），支持（input, select, remoteSelect, date,datetime,datetimerange,daterange）" :file="'table10.text'">
                    <template v-slot:example>
                        <div style="height: 400px;">
                            <Table10></Table10>
                        </div>
                    </template>
                </ExamplePanel>
                <!-- 表格启动表头筛序（远程获取搜索条件） -->
                <ExamplePanel title="table组件完整案例：" desc="案例包含：表头筛选（远程搜索条件，多条件之间彼此限制，多选...），表头排序，列表操作，以及自定义操作列表事件"
                    :file="'table1.text'">
                    <template v-slot:example>
                        <div style="height: 400px;">
                            <Table></Table>
                        </div>
                    </template>
                </ExamplePanel>
            </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane class label="文档" name="second">
            <Document></Document>
        </el-tab-pane>
    </el-tabs>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import Table from './components/Table.vue';
import Table1 from './components/Table1.vue';
import Table3 from './components/Table3.vue';
import Table4 from './components/Table4.vue';
import Table5 from './components/Table5.vue';
import Table6 from './components/Table6.vue';
import Table7 from './components/Table7.vue';
import Table8 from './components/Table8.vue';
import Table9 from './components/Table9.vue';
import Table10 from './components/Table10.vue';
import Document from './components/Document.vue';
import ExamplePanel from '../components/ExamplePanel.vue'
const activeName = ref('first')
</script>